<template>
  <div class="container of-x-s of-y-h">
    <rule @hideRule="hideRule()" v-if="showRuleFlag"></rule>
    <tips-senhe @hideSenhe="hideSenhe()" v-if="showSenheFlag"></tips-senhe>
    <tips-prize @hidePrize="hidePrize()" v-if="showPrizeFlag"></tips-prize>
    <!-- <div class="icon icon-logo"></div> -->
    <div class="icon icon-cloud icon-cloud1"></div>
    <div class="icon icon-cloud icon-cloud2"></div>
    <div class="icon icon-arrow-left"></div>
    <div class="icon icon-arrow-right"></div>
    <!-- <div class="icon icon-tips"></div> -->
    <div @click="showRule()" class="icon icon-rule">活动介绍</div>
    <div class="icon icon-text">
      <div class="num1">已集齐: {{userInfo.num_now || 0}}</div>
      <div class="num2">未集齐: {{8 - userInfo.num_now || 8}}</div>
    </div>
    <div ref="wrapper" class="wrapper">
      <div class="content">
        <img ref="bg" class="bg" :src="bgImg" alt="">
        <div :class="{'ani-bus10': aniIndex==10}" class="icon icon-car1"></div>
        <div :class="{'ani-bus11': aniIndex==10}" class="icon icon-car2"></div>
        <div>
          <div :class="{'ani-bus0': aniIndex==0}" class="icon icon-car1"></div>
          <div :class="{'ani-bus1': aniIndex==1}" class="icon icon-car2"></div>
          <div :class="{'ani-bus2': aniIndex==2}" class="icon icon-car1"></div>
          <div :class="{'ani-bus3': aniIndex==3}" class="icon icon-car2"></div>
          <div :class="{'ani-bus4': aniIndex==4}" class="icon icon-car2"></div>
          <div :class="{'ani-bus5': aniIndex==5}" class="icon icon-car2"></div>
          <div :class="{'ani-bus6': aniIndex==6}" class="icon icon-car1"></div>
          <div :class="{'ani-bus7': aniIndex==7}" class="icon icon-car1"></div>
        </div>
        <div>
          <div v-for="(value,key) in ticketArr" :value="value" :key="key" @click="handdleTagClick(key)" :class="{'act': value.status==3 || value.status==4, 'tag-hide': value.status==2, 'tag-show': value.status==3, 'tag-end': value.status==4}" class="icon tag"></div>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import resources from '../assets/js/resources'
import rule from '@/components/rule'
import tipsSenhe from '@/components/tipsSenhe'
import tipsPrize from '@/components/tipsPrize'
import { mapState } from 'vuex'
import BScroll from 'better-scroll'

export default {
  name: 'index',
  components: {
    rule,
    tipsSenhe,
    tipsPrize
  },
  data () {
    return {
      ticketArr: [{ status: 1 }, { status: 1 }, { status: 1 }, { status: 1 }, { status: 1 }, { status: 1 }, { status: 1 }, { status: 1 }],
      bgImg: resources.images.bgImg,
      showRuleFlag: false,
      showSenheFlag: false,
      showPrizeFlag: false,
      num1: 0,
      num2: 8,
      aniIndex: -1,
      oldNum: null,
      scroll: null
    }
  },
  computed: mapState({
    activityGuid: 'activityGuid',
    userInfo: 'userInfo'
  }),
  mounted () {
    if (!localStorage.getItem('hasEntered')) {
      this.showRuleFlag = true
    }
    localStorage.setItem('hasEntered', 1)
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        scrollX: true,
        click: true
      })
    })
    // this.initOtherBus()
    // this.showPrizeFlag = true
  },
  methods: {
    hideRule () {
      this.showRuleFlag = false
    },
    showRule () {
      this.showRuleFlag = true
    },
    hideSenhe () {
      this.showSenheFlag = false
      this.runNumNow()
      // setTimeout(() => {
      //   this.aniTag(this.userInfo.num_now - 1)
      // }, 666)
    },
    hidePrize () {
      this.showPrizeFlag = false
    },
    initStatus (numNow) {
      let oldNum = localStorage.getItem('oldNum')
      if (!oldNum) {
        oldNum = 0
      } else {
        oldNum = +oldNum
        if (oldNum === 8 && numNow < 8) {
          oldNum = 0
        }
      }
      if (numNow === 0 || !numNow) {
        oldNum = 0
        localStorage.setItem('oldNum', 0)
      } else {
        if (!localStorage.getItem('hasEntered')) {
          oldNum = numNow
        }
      }
      this.oldNum = oldNum
      for (let i = 0; i < oldNum; i++) {
        this.ticketArr[i].status = 4
      }
      localStorage.setItem('oldNum', numNow)
      console.log('oldNum>>>', oldNum)
      console.log('numNow>>>', numNow)
      // if (numNow > 0) {
      //   for (let j = oldNum; j < numNow; j++) {
      //     (() => {
      //       setTimeout(() => {
      //         this.aniTag(j)
      //       }, (j - oldNum + 1) * 5000)
      //     })(j, oldNum)
      //   }
      //   setTimeout(() => {
      //     this.aniIndex = 10
      //     localStorage.setItem('oldNum', numNow)
      //   }, (numNow - oldNum + 1) * 5000)
      // }
    },
    runNumNow () {
      let oldNum = this.oldNum
      let numNow = this.userInfo.num_now
      if (numNow > 0 && numNow > oldNum) {
        this.aniTag(oldNum)
        let m = oldNum + 1
        for (let j = m; j < numNow; j++) {
          (() => {
            setTimeout(() => {
              this.aniTag(j)
            }, (j - m + 1) * 5000)
          })(j, m)
        }
        setTimeout(() => {
          this.aniIndex = 10
        }, (numNow - oldNum) * 5000)
      }
    },
    aniTag (index) {
      this.aniIndex = index
      setTimeout(() => {
        this.ticketArr[index].status = 2
      }, 1500)
      setTimeout(() => {
        this.ticketArr[index].status = 3
      }, 2500)
      setTimeout(() => {
        this.ticketArr[index].status = 4
      }, 3500)
    },
    handdleTagClick (index) {
      if (this.ticketArr[index].status !== 1) return false
      this.$router.push('/submit')
    }
  },
  watch: {
    userInfo (curVal, oldVal) {
      this.initStatus(this.userInfo.num_now)
      if (curVal.is_check === 2) {
        this.showSenheFlag = true
      }
      if (curVal.num_now === 8) {
        this.showPrizeFlag = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/mixins.scss';
.container{
  height:100%;
}
.wrapper{
  position: absolute;
  top:50%;
  width: 100%;
  height: 12.18rem;
  overflow: hidden;
  transform: translateY(-50%);
  overflow: hidden;
  .content{
    width: 15rem;
    position: relative;
  }
}
.bg{
  display: block;
  width:100%;
  height:100%;
}
// .icon-logo{
//   position: fixed;
//   z-index:3;
//   top:2.63%;
//   left:.32rem;
//   width:1.24rem;
//   height:1.32rem;
//   @include bg-image('../assets/images/icon-logo');
// }
.icon-arrow-left,.icon-arrow-right{
  position:absolute;
  top:50%;
  transform: translateY(-.3rem);
  width:.39rem;
  height:.6rem;
  z-index:3;
}
.icon-arrow-left{
  left:.3rem;
  @include bg-image('../assets/images/icon-arrow-left');
  // animation: fadeMoveLeft 3s infinite;
}
.icon-arrow-right{
  right:.3rem;
  @include bg-image('../assets/images/icon-arrow-right');
  // animation: fadeMoveRight 3s infinite;
}
@keyframes fadeMoveLeft {
  0%{
    opacity: .8;
    transform: translateX(.1rem);
  }
  100%{
    transform: translateX(-.1rem);
    opacity:.1;
  }
}
@keyframes fadeMoveRight {
  0%{
    opacity: .8;
    transform: translateX(-.1rem);
  }
  100%{
    transform: translateX(.1rem);
    opacity:.1;
  }
}
// .icon-tips{
//   width:1.66rem;
//   height:0.89rem;
//   position: fixed;
//   z-index:3;
//   bottom:4.1%;
//   left:2.92rem;
//   @include bg-image('../assets/images/icon-tips');
// }
.icon-rule{
  z-index:3;
  position: absolute;
  right:.5rem;
  bottom:4.1%;
  padding:.08rem .2rem;
  font-size:.24rem;
  border-radius:.3rem;
  background-color:#4e2c69;
  border:.03rem solid #9884b2;
}
.icon-cloud{
  width:.86rem;
  height:.34rem;
  position: absolute;
  z-index:4;
  transform: translateX(-2rem);
}
.icon-cloud1{
  top:1.5rem;
  @include bg-image('../assets/images/icon-cloud1');
  animation: cloud 7.7s linear infinite;
}
.icon-cloud2{
  top:.6rem;
  @include bg-image('../assets/images/icon-cloud2');
  animation: cloud 8.8s linear infinite;
}
@keyframes cloud {
  0%{
    transform: translateX(8rem);
  }
  100%{
    transform: translateX(-1rem);
  }
}
.icon-text{
  z-index:3;
  position: absolute;
  left: .5rem;
  top:2.63%;
  width:2.94rem;
  height:1.95rem;
  @include bg-image('../assets/images/icon-text');
  animation: tagend 2s infinite;
  .num1,.num2{
    font-size:.3rem;
    position: absolute;
    width:1rem;
    left:1.2rem;
    top:.6rem;
    width:1.5rem;
    text-align: center;
  }
  .num2{
    top:1rem;
  }
}
.icon-car1{
  position: absolute;
  width:1.55rem;
  height:1.18rem;
  left:0rem;
  top:0rem;
  opacity:0;
  @include bg-image('../assets/images/icon-car1');
}
.icon-car2{
  position: absolute;
  width:1.68rem;
  height:1.22rem;
  left:0rem;
  top:0rem;
  opacity:0;
  @include bg-image('../assets/images/icon-car2');
}
.ani-bus10{
  animation: anibus10 3.6s linear 4s infinite;
}
.ani-bus11{
  animation: anibus11 3.6s linear 3s infinite;
}
.ani-bus0,.ani-bus6{
  animation: anibus0 5s linear;
}
.ani-bus1{
  animation: anibus1 5s linear;
}
.ani-bus2{
  animation: anibus2 5s linear;
}
.ani-bus3{
  animation: anibus3 5s linear;
}
.ani-bus4,.ani-bus5{
  animation: anibus4 5s linear;
}
.ani-bus7{
  animation: anibus7 5s linear;
}
@keyframes anibus {
  0%{
    left:15rem;
    top:0.1rem;
    opacity:0;
  }
  20%{
    opacity:1;
  }
  100%{
    left:-1.12rem;
    top:9.7rem;
    opacity:1;
  }
}
@keyframes anibus0 {
  0%{
    transform: translate3d(8.24rem, 3.86rem,0);
    opacity:0;
  }
  20%{
    opacity:1;
    transform: translate3d(5.72rem, 5.35rem,0);
  }
  30%{
    @include bg-image('../assets/images/icon-car1')
  }
  40%{
    @include bg-image('../assets/images/icon-car1-light')
  }
  50%{
    @include bg-image('../assets/images/icon-car1')
  }
  60%{
    @include bg-image('../assets/images/icon-car1-light')
  }
  70%{
    @include bg-image('../assets/images/icon-car1')
  }
  80% {
    transform: translate3d(5.72rem, 5.35rem,0);
  }
  100%{
    transform: translate3d(-1.18rem, 9.5rem,0);
    opacity:1;
  }
}
@keyframes anibus1 {
  0%{
    transform: translate3d(1.05rem, 4.45rem,0);
    opacity:0;
  }
  20%{
    opacity:1;
    transform: translate3d(2.57rem, 5.16rem,0);
  }
  30%{
    @include bg-image('../assets/images/icon-car2')
  }
  40%{
    @include bg-image('../assets/images/icon-car2-light')
  }
  50%{
    @include bg-image('../assets/images/icon-car2')
  }
  60%{
    @include bg-image('../assets/images/icon-car2-light')
  }
  70%{
    @include bg-image('../assets/images/icon-car2')
  }
  80% {
    transform: translate3d(2.57rem, 5.16rem,0);
  }
  100%{
    transform: translate3d(15.10rem, 11.5rem,0);
    opacity:1;
  }
}
@keyframes anibus2 {
  0%{
    transform: translate3d(8.24rem, 3.86rem,0);
    opacity:0;
  }
  20%{
    opacity:1;
    transform: translate3d(1.09rem, 8.11rem,0);
    // left:1.09rem;
    // top:8.11rem;
  }
  30%{
    @include bg-image('../assets/images/icon-car1')
  }
  40%{
    @include bg-image('../assets/images/icon-car1-light')
  }
  50%{
    @include bg-image('../assets/images/icon-car1')
  }
  60%{
    @include bg-image('../assets/images/icon-car1-light')
  }
  70%{
    @include bg-image('../assets/images/icon-car1')
  }
  80% {
    transform: translate3d(1.09rem, 8.11rem,0);
    // left:1.09rem;
    // top:8.11rem;
  }
  100%{
    transform: translate3d(-1.18rem, 9.65rem,0);
    // left:-1.18rem;
    // top:9.65rem;
    opacity:1;
  }
}
@keyframes anibus3 {
  0%{
    transform: translate3d(1.05rem, 4.45rem,0);
    opacity:0;
  }
  20%{
    opacity:1;
    transform: translate3d(6.52rem, 7.12rem,0);
  }
  30%{
    @include bg-image('../assets/images/icon-car2')
  }
  40%{
    @include bg-image('../assets/images/icon-car2-light')
  }
  50%{
    @include bg-image('../assets/images/icon-car2')
  }
  60%{
    @include bg-image('../assets/images/icon-car2-light')
  }
  70%{
    @include bg-image('../assets/images/icon-car2')
  }
  80% {
    transform: translate3d(6.52rem, 7.12rem,0);
  }
  100%{
    transform: translate3d(15.10rem, 11.5rem,0);
    opacity:1;
  }
}
@keyframes anibus4 {
  0%{
    transform: translate3d(1.05rem, 4.45rem,0);
    opacity:0;
  }
  20%{
    opacity:1;
    transform: translate3d(9.48rem, 8.58rem,0);
  }
  30%{
    @include bg-image('../assets/images/icon-car2')
  }
  40%{
    @include bg-image('../assets/images/icon-car2-light')
  }
  50%{
    @include bg-image('../assets/images/icon-car2')
  }
  60%{
    @include bg-image('../assets/images/icon-car2-light')
  }
  70%{
    @include bg-image('../assets/images/icon-car2')
  }
  80% {
    transform: translate3d(9.48rem, 8.58rem,0);
  }
  100%{
    transform: translate3d(15.10rem, 11.5rem,0);
    opacity:1;
  }
}
@keyframes anibus7 {
  0%{
    transform: translate3d(8.24rem, 3.86rem,0);
    opacity:0;
  }
  20%{
    opacity:1;
    transform: translate3d(8.24rem, 3.86rem,0);
  }
  30%{
    @include bg-image('../assets/images/icon-car1')
  }
  40%{
    @include bg-image('../assets/images/icon-car1-light')
  }
  50%{
    @include bg-image('../assets/images/icon-car1')
  }
  60%{
    @include bg-image('../assets/images/icon-car1-light')
  }
  70%{
    @include bg-image('../assets/images/icon-car1')
  }
  80% {
    transform: translate3d(8.24rem, 3.86rem,0);
  }
  100%{
    transform: translate3d(-1.18rem, 9.5rem,0);
    opacity:1;
  }
}
@keyframes anibus10 {
  0%{
    transform: translate3d(8.24rem, 3.86rem,0);
    opacity:0.75;
  }
  100%{
    transform: translate3d(-1.18rem, 9.5rem,0);
    opacity:1;
  }
}
@keyframes anibus11 {
  0%{
    transform: translate3d(1.05rem, 4.45rem,0);
    opacity:0.75;
  }
  100%{
    transform: translate3d(15.10rem, 11.5rem,0);
    opacity: 1;
  }
}
.tag{
  position:absolute;
  z-index:2;
}
.tag-hide {
  animation: taghide 1s;
}
.tag-show{
  animation: tagshow 1s;
}
.tag-end{
  animation: tagend 1s infinite;
}
@keyframes taghide {
  0%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes tagshow {
  0%{
    transform: translateY(-20rem);
  }
  100%{
    transform: translateY(0);
  }
}
@keyframes tagend {
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-0.33em);
  }
  100%{
    transform: translateY(0);
  }
}
@for $i from 0 through 7{
  .tag:nth-of-type(#{$i+1}){
    animation-duration: #{1 + $i * 0.08}s !important;
    @include bg-image('../assets/images/icon-tag#{$i+1}');
  }
  .tag:nth-of-type(#{$i+1}).act{
    @include bg-image('../assets/images/icon-tag#{$i+1}-act');
  }
}
.tag:nth-of-type(1){
  left:4.32rem;
  top:3.23rem;
  width:2.10rem;
  height:2.51rem;
}
.tag:nth-of-type(2){
  left:1.33rem;
  top:4.09rem;
  width:1.63rem;
  height:3.03rem;
}
.tag:nth-of-type(3){
  left:2.2rem;
  top:8.98rem;
  width:2.12rem;
  height:2.44rem;
}
.tag:nth-of-type(4){
  left:4.54rem;
  top:7.27rem;
  width:1.88rem;
  height:2.07rem;
}
.tag:nth-of-type(5){
  left:6.82rem;
  top:8.78rem;
  width:2.81rem;
  height:2.42rem;
}
.tag:nth-of-type(6){
  left:11.18rem;
  top:6.09rem;
  width:2.84rem;
  height:2.69rem;
}
.tag:nth-of-type(7){
  left:8.05rem;
  top:5.02rem;
  width:1.61rem;
  height:2.29rem;
}
.tag:nth-of-type(8){
  left:10.49rem;
  top:3.93rem;
  width:1.75rem;
  height:2.05rem;
}
</style>
